<template>
  <view class="index-container">
    <!-- 用户信息区域 -->
    <view v-if="user.userInfo.token" class="user-info" @click="goToMyInfo">
      <view class="user-info-img">
        <image class="avatar" mode="aspectFill" :src="userInfo.avatar"></image>
      </view>
      <view class="info">
        <view class="nickName">{{ userInfo.nickname }}</view>
        <view class="mobile">{{ userInfo.mobile }}</view>
      </view>
    </view>

    <!-- 未登录状态 -->
    <view v-else class="user-info" @click="handleLogin">
      <view class="user-info-img">
        <image
          class="avatar"
          mode="aspectFill"
          src="https://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"
        ></image>
      </view>
      <view class="info">
        <view class="nickName">点击登录/注册</view>
      </view>
    </view>

    <!-- 常用功能列表 -->
    <view class="function">
      <view class="title">常用功能</view>
      <view class="function-list">
        <view
          class="list-item"
          @click="goToHelp"
        >
          <view class="left">
            <uni-icons type="help" size="24"></uni-icons>
            <text>常见问题</text>
          </view>
          <uni-icons type="forward" size="24" color="#dedfe0"></uni-icons>
        </view>
        <view
          v-if="user.userInfo.token"
          class="list-item"
          @click="goToAddress"
        >
          <view class="left">
            <uni-icons type="location" size="24"></uni-icons>
            <text>收货地址</text>
          </view>
          <uni-icons type="forward" size="24" color="#dedfe0"></uni-icons>
        </view>
         <view
          class="list-item"
          @click="goToMyInfo"
          v-if="user.userInfo.token"
        >
          <view class="left">
            <uni-icons type="settings" size="24"></uni-icons>
            <text>个人信息</text>
          </view>
          <uni-icons type="forward" size="24" color="#dedfe0"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 安全退出按钮 -->
    <button v-if="user.userInfo.token" class="logout-button" @click="outLogin">
      安全退出
    </button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
import { userStore } from "@/stores/modules/userStore";
import { onShow } from "@dcloudio/uni-app";
import {fetchUserInfoApi} from "@/api/user";
import {showError, showSuccess} from '@/utils/feedback'
// 获取用户状态
const user = userStore();
const userInfo = ref(
  {
    nickname: "",
    avatar:"",
  }
);

// 获取用户信息
const fetchUserInfo = async () => { 
  try {
    const res = await fetchUserInfoApi();
    if (res.code == 200) { 
      userInfo.value = res.data;
    } else {
      console.error("获取用户信息异常:", res.message);
      showError(res.message); 
    } 
  } catch (error) { 
    console.error("获取用户信息异常:", error);
    showError("网络异常，请稍后重试");
  }
};

// 页面加载时更新用户信息
onShow(() => {    
  fetchUserInfo()
});
// 跳转方法定义
const navigateToPage = (url) => {
  uni.navigateTo({ url });
};
const goToMyInfo = () => navigateToPage("/pages/my/myInfo");
const handleLogin = () => navigateToPage("/pages/login/index");
const goToHelp = () => navigateToPage("/pages/my/help");
const goToAddress = () => navigateToPage("/pages/address/index");
const outLogin = () => {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        user.clearUserInfo();
        showSuccess("退出成功");
      }
    },
  });
};

</script>

<style scoped lang="scss">
.index-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  height: 100%;
}

/* 用户信息样式 */
.user-info {
  height: 140px;
  background: linear-gradient(to bottom, transparent, #fff 400rpx),
    linear-gradient(to right, #beecd8 20%, #f4e2d8);
  border-radius: $uni-border-radius-base;
  display: flex;
  align-items: center;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  gap: 20px;

  .info {
    flex: 1;
    .nickName {
      color: #303133;
      font-size: 24px;
    }
    .mobile {
      color: #303133;
      font-size: 16px;
    }
  }

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}

/* 常用功能模块 */
.function {
  background-color: #ffffff;
  border-radius: $uni-border-radius-base;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .title {
    position: relative;
    font-size: 24px;
    color: #303133;
    padding-left: 12px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 4px;
      height: 20px;
      background-color: #409eff;
      border-radius: 2px;
    }
  }

  .function-list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .list-item {
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 16px;
      color: #303133;
      cursor: pointer;

      .left {
        display: flex;
        align-items: center;
      }
    }
  }
}

.logout-button {
  width: 100%;
  background-color: $color-primary;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  padding: 12px 0;
}
</style>
